<template>
	<div class="detail">
		<h1><a href="javascript:;" @click="goback()">&lt;</a>{{list[0].name}}</h1>
		<div class="top">
			<img :src="list[0].icon" alt="">
			<div>
              <h4>{{list[0].name}}</h4>
              <p :style="{background:list[0].labelList.color}" >{{list[0].labelList.name}}</p>
              <p>{{list[0].description}}</p>
            </div>
		</div>
	    <h3>
	       <router-link to="about" activeClass="current" exact>游戏简介</router-link>
    	   <router-link to="gift" activeClass="current" exact>游戏礼包</router-link>
	    </h3>
	    <transition name="slide-fade">
	    	<router-view/>
	    </transition>
	    <div class="recommend">
	    	<span>相关游戏推荐</span>
	    	<ul>
	    		<li v-for="item in list[0].recommendList">
	    			<img :src="item.image" alt="">
	    			<p>{{item.name}}</p>
	    		</li>
	    	</ul>
	    </div>
	    <div class="play">
	    	<div :class={red:flag} @click.once="addCollect(list[0])"><b>❤ </b> 收藏</div>
	    	<div>开始游戏</div>
	    </div>
	</div>
</template>
<script>
export default {
  name: 'detail',
  data(){
  	return {
  		flag:false,
	  	name:"",
	  	list:[
	  		{"name":"乱戳三国","icon":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20160518171057_826.png","description":"群将约架，一统三国。","labelList":{"name":"挂机放置","color":"#DA92E9"},"recommendList":[{"image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701233800_138.png","name":"愚公移山","id":"524"},{"image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150722153801_868.png","name":"盗墓英雄","id":"579"},{"image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701233517_246.png","name":"摩尔战记","id":"522"},{"image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701234844_879.jpg","name":"古龙群侠传","id":"525"}]}
	  	]
	}
  	
  },
  methods:{
  	addCollect:function(game){
  		this.flag = !this.flag;
  		this.$store.dispatch("addGameA", game);
  	},
  	goback:function(){
  		window.history.back();
  	}
  }
 } 	
</script>
<style  scoped>
	.detail{
    width: 100%;
  }
  h1{
    height: 44px;
    line-height: 44px;
    background-color: #07b3ef;
    color: #fff;
    text-align: center;
    font-size: 20px;
    position: relative;
  }
  h1 a{

    position: absolute;
    left: 0.1rem;
    color: #fff;
    font-size: 40px;
    line-height:44px;
  }
  h3{
    height: 44px;
    background: #fff;
    width: 100%;
  }
  h3 a{
    display: inline-block;
    width: 1rem;
    text-align: center;
    line-height: 40px;
    border-bottom:4px solid #fff;
    margin-left: 0.4rem; 
  }
  .current{
    color:#07b3ef;
    border-bottom-color:#07b3ef;
  }
  .slide-fade-enter-active {
	transition: all .2s ease;
  }
  .slide-fade-leave-active {
  	transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  	transform: translateX(10px);
  	opacity: 0;
  }
  .top{
  	height: 0.9rem;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
    padding-left: 0.12rem;
    border-bottom: 0.1rem solid #eee;
  }
  .top img{
  	height: 0.5rem;
  	width: 0.5rem;
  }
  .top div{
  	margin-left: 0.1rem;
  }
  .top div p:first-of-type{
    color: #fff;
    width: 0.6rem;
  }
  .top div p:last-of-type{
  	color: #999;
  }
  .recommend{
  	width: 100%;
  	display: flex;
  	flex-direction: column;
  	background: #fff;
  	border-top: 10px solid #ddd;
  }
  .recommend span{
  	display: block;
  	border-bottom: 1px solid #ccc;
  }
  .recommend ul{
  	width: 100%;
  	display: flex;
  	
  }
  .recommend ul li{
  	width: 0.8rem;
  	text-align: center;
  	padding: 0.1rem 0px;
  }
  .recommend ul li img{
	display: inline-block;
  	width:0.6rem;
  	height: 0.6rem;
  }
  .play{
  	background: #fff;
  	width: 100%;
  	position: fixed;
  	height: 0.49rem;
  	bottom: 0;
  	z-index: 9999;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  }
	.play div:nth-of-type(1){
		line-height: 20px;
		padding: 0.15rem;
	}
	.play div:last-of-type{
		height: 100%;
		padding: 0px 0.2rem;
		line-height: 0.49rem;
		color: #fff;
		font-size: 20px;
		background: #07b3ef;
	}
	.red{
		color: red;
	}
</style>